<template>
  <a-modal
    :title="modalTitle"
    :width="640"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        v-bind="formLayout"
        ref="ruleForm"
        :rules="rules"
        @submit.native.prevent>
        <a-form-model-item
          label="菜单名称"
          prop="permissonName">
          <a-input size="large" v-model="model.permissonName" />
        </a-form-model-item>
        <a-form-model-item
          label="上级菜单"
          prop="parentId" >
          <a-select size="large" v-model="model.parentId">
            <a-select-option :value="0">
              顶级菜单
            </a-select-option>
            <a-select-option v-for="d in menuLists" :key="d.id" :value="d.id">
              {{ d.menuName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item  label="菜单路由name">
          <a-input size="large" v-model="model.menuUrl" />
        </a-form-model-item> -->
        <a-form-model-item label="菜单key" prop="key">
          <a-input size="large" v-model="model.key" />
        </a-form-model-item>
        <a-form-model-item
          label="菜单状态"
          prop="permissonStatus">
          <a-radio-group v-model="model.permissonStatus">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="0">关闭</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="排序"
          prop="sort">
          <!-- <a-input size="large" v-model="model.sort" /> -->
          <a-input-number id="inputNumber" v-model="model.sort" :min="1" @change="onChange"/>
        </a-form-model-item>
        <a-form-model-item
          label="菜单描述"
          prop="permissonDescription">
          <a-textarea :rows="3" v-model="model.permissonDescription" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
// 表单字段
const fields = ['permissonName', 'permissonDescription', 'parentId', 'key', 'permissonStatus', 'menuUrl', 'sort']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      loading: false,
      modalTitle: '添加菜单',
      rules: {
        permissonName: [{ required: true, message: '菜单名称必填', trigger: ['blur', 'change'] }],
        key: [{ required: true, message: '菜单key必填', trigger: ['blur', 'change'] }],
        permissonStatus: [{ required: true, message: '菜单状态必选', trigger: ['blur', 'change'] }],
        sort: [{ required: true, message: '排序必填', trigger: ['blur', 'change'] }]
      },
      form: this.$form.createForm(this),
      menuLists: [],
      sort: 1
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
  },
  mounted () {
    this.getMenuList()
  },
  methods: {
    onChange(sort) {
      console.log('changed', sort)
    },
    getMenuList () {
      const params = {
        pageNo: 1,
        pageSize: 1000,
        parentId: 0
      }
      this.$common.handlePost('/jdsysAdminBodyPermission/pageSelectAdminBodyPermission', params).then(data => {
        this.loading = false
        if (data.code === 200) {
          this.menuLists = data.result.records
        }
      })
    },
    // 弹出框-确定
    handleOk (e) {
      const {
        handleFormData
      } = this
      this.loading = true
      // 验证表单
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.model.id ? handleFormData('/jdsysAdminBodyPermission/updatePermission') : handleFormData('/jdsysAdminBodyPermission/saveBodyPermission')
        } else {
          const _this = this
          setTimeout(() => {
            _this.loading = false
          }, 600)
        }
      })
    },
    // 弹出框-取消
    handleCancel (e) {
      // 重置表单数据
      this.$refs.ruleForm.resetFields()
      this.$emit('cancel')
    },
    // 表单数据处理
    handleFormData (url) {
      this.$common.handlePost(url, this.model)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 重置表单数据
              this.$refs.ruleForm.resetFields()
              // 关闭弹框
              this.$emit('ok')
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  watch: {
    model (newVal, oldVal) {
      if (newVal.id) this.modalTitle = '修改菜单'
      else this.modalTitle = '添加菜单'
    }
  }
}
</script>
